<template>
  <div class="recommend">
    <Card>
        <span>爆款推荐</span>
    </Card>
    <ul>
        <li v-for="(item,index) in recommendList" :key="index">
            <h1>
                <img :src="item.imgUrl" alt="">
            </h1>
            <div>
                <h3>{{item.name}}</h3>
                <p>{{item.content}}</p>
                <div class="price">
                    <span>￥</span>
                    <b>{{item.price}}</b>
                </div>
                
            </div>
        </li>
    </ul>
  </div>
</template>

<script>
import Card from "@/components/home/Card.vue"
export default {
    props:{
        recommendList:Array
    },
    // data(){
    //     return{
    //         recommendList:[
    //             {
    //                 id:1,
    //                 name:'龙井',
    //                 content:'口粮首选',
    //                 price:'68',
    //                 imgUrl:'./images/longjing.png'
    //             },
    //             {
    //                 id:2,
    //                 name:'普洱茶',
    //                 content:'香醇可口',
    //                 price:'78',
    //                 imgUrl:'./images/puer.jpg'
    //             },
    //             {
    //                 id:3,
    //                 name:'毛尖茶',
    //                 content:'清甜可口',
    //                 price:'66',
    //                 imgUrl:'./images/maojian.jpeg'
    //             },
    //             {
    //                 id:4,
    //                 name:'花茶',
    //                 content:'清甜可口',
    //                 price:'66',
    //                 imgUrl:'./images/huacha.jpg'
    //             },
    //         ]
    //     }
    // },
    components:{
        Card,
    }
}
</script>


<style scoped>
.recommend ul li{
    background-color: rgba(242, 237, 237, 0.969);
    border: 0.0625rem solid #fff;
    border-radius: 1rem;
	margin: 1rem 0;
}
.recommend ul li h1{
    width: 22.5rem;
}
.recommend ul li{
    position: relative;
}
.recommend ul li h2 {
    text-align: center;
}
.recommend ul li img {
    /* w150px比较合适 */
    width: 9.375rem;
    height: 9rem;
    border-radius: 0.75rem;
}
.recommend ul li > div{
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    padding: 1.25rem;

}
.recommend ul li > div h3, .recommend ul li > div p{
    font-size: 0.875rem;
}
.price{
    margin-top: 1.5625rem;
    text-align: right;
}
.price span,b{
    color: red;
    font-size: 0.75rem;
}



</style>